<template>
  <div class="home">
    <div @click="increment">加加加</div>
    <div @click="reset">重置</div>
    <div @click="change">改变</div>
  </div>
  <div>
    {{ count }} === {{ b }}
  </div>
  <div :class="flex_center">{{ number }} ==> {{ numberTwo }}</div>
</template>

<script lang="ts" setup>
// json 导入
// import { data } from "/@/utils/res.json";
// import res from "/@/utils/res.json";
// console.log(data);
// console.log(res);

// 俩种css引入方式
import { flex_center } from '/@/utils/cssModel/common.module.css';
import '/@/utils/cssModel/base.css';
import { defineComponent, watch, ref, computed } from 'vue';
import { a } from './number.js';
import { useCounterStore } from '/@/store/index';
import { storeToRefs } from 'pinia'

const { number, numberTwo } = a();

const counterStore = useCounterStore();

const { increment } = counterStore

const { b } = storeToRefs(counterStore)

const count = computed(() => counterStore.count)

function reset() {
  counterStore.$reset()
}

function change() {
  // counterStore.$patch({
  //   count:500,
  //   b:2
  // })
  // or
  // counterStore.$state = { count: 500, b:2 }
  // or
  b.value = 10086
}

</script>

<style lang='less'>
.home {
  font-size: 24px;
  div {
    color: red;
  }
}
</style>